<template>
	<div class="examine">
		<div style="display: flex; justify-content: end">
			<div style="display: flex;width: 250px;">
				<el-select v-model="userId" filterable remote placeholder="按名字搜索" 
					:remote-method="getUserList" :loading="selectLoading"
					@focus="getUserList('')" @change="getAllGoods"
					style="width: 150px;">
					<el-option v-for="item in userList" :key="item.id" 
						:label="item.nickName" :value="item.id">
					</el-option>
				</el-select>
				<el-button @click="reset" v-debounce style="margin-left: 10px;">
					重置
				</el-button>
			</div>
		</div>
		<div class="goods-table">
			<el-table :data="tableData" v-loading="loading" border stripe height="100%">
				<el-table-column prop="i" label="序号" fixed="left" width="80">
				</el-table-column>
				<el-table-column prop="userName" label="用户姓名" fit>
				</el-table-column>
				<el-table-column prop="managementName" label="厂长审核员" fit>
				</el-table-column>
				<el-table-column prop="financeName" label="财务审核员" fit>
				</el-table-column>
				<el-table-column prop="userId" label="操作" fixed="right" width="100">
					<template slot-scope="scope">
						<el-button size="mini" @click="Employeeupda(scope.row.examineId)">
							编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background :current-page="currentPage" :page-size="pageSize"
				:total="total" :page-sizes="[20, 50, 100]" 
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper" >
			</el-pagination>
		</div>

		<!-- 审核弹窗 -->
		<el-dialog style="margin-top: 0" :visible.sync="addFromDialog" width="30%" :show-close="false" :title="title">
			<div>{{ tab2.userName }}</div>
			<div style="height: 30px"></div>
			审核库管：
			<el-select v-model="tab2.managementId" placeholder="请选择审核厂长">
				<el-option v-for="item in options1" :key="item.id" :label="item.nickName" :value="item.id">
				</el-option>
			</el-select>
			<br />
			<div style="height: 30px"></div>

			<!-- 审核员 -->
			审核财务：
			<el-select v-model="tab2.financeId" placeholder="请选择审核财务">
				<el-option v-for="item in options2" :key="item.id" :label="item.nickName" :value="item.id">
				</el-option>
			</el-select>
			<!-- 保存，取消按钮 -->
			<div style="text-align: center; margin-top: 30px">
				<el-button type="primary" @click="addEmplo" v-debounce>保存</el-button>
				<el-button @click="addFromDialog = false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import userApi from "../../api/user.js";
	import examine from "../../api/examine";
	import dayjs from "dayjs";
	import {
		addEmployeeProfile,
		selectEmployeeProfileByName,
		devicesSelectList, //查询仓库产品列表
		examineList, //管理查询所有用户信息
		examineUpdate, //管理修改
		examineByType, //查询指定类型审核员
	} from "../../api/all";
	export default {
		components: {},
		data() {
			return {
				userId: null,
				selectLoading: false,
				userList: [],
				//厂长
				options1: "",
				//财务
				options2: "",
				tab2: "",
				tb3: {
					examineId: "",
					userId: "",
					managementId: "",
					financeId: "",
				},
				//搜索框的值
				input: "",
				// 图片预览
				srcList: [],
				srcList2: [],
				//新增标题
				title: "编辑",
				roleType: false,
				cover: "cover",
				// 显示表单
				addFromDialog: false,
				// 表格加载
				loading: false,
				tableData: [],
				//审核通过状态
				applyStatus: false,
				//总数页
				total: 0,
				// 分页大小
				pageSize: 50,
				//记录当前页数
				currentPage: 1,
			};
		},
		mounted() {
			let userInfo = JSON.parse(localStorage.getItem("userInfo"));
			if (userInfo.roleId == 1) {
				this.roleType = true;
			}
			this.getAllGoods();
		},
		//超级管理员显示功能
		methods: {
			// 格式化时间
			formatDate(date) {
				const d = new Date(date);
				const year = d.getFullYear();
				const month = (d.getMonth() + 1).toString().padStart(2, "0");
				const day = d.getDate().toString().padStart(2, "0");
				const hours = d.getHours().toString().padStart(2, "0");
				const minutes = d.getMinutes().toString().padStart(2, "0");
				const seconds = d.getSeconds().toString().padStart(2, "0");
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

				// return `${year}-${month}-${day}`;
			},
			startTimeChange(value) {
				this.addEmployeeForm.startTime = dayjs(value).format(
					"YYYY-MM-DD HH:mm:ss"
				);
				console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
			},
			endTimeChange(value) {
				this.addEmployeeForm.endTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
				console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
			},

			// 点击编辑
			Employeeupda(id) {
				this.tableData.forEach((item) => {
					if (item.examineId == id) {
						this.tab2 = item;
					}
				});
				//查询审核员
				examineByType("5").then((res) => {
					this.options1 = res.data;
				});
				//查询财务员
				examineByType("6").then((res) => {
					this.options2 = res.data;
				});
				this.addFromDialog = true;
			},

			//格式化名称
			formatter1(id) {
				this.options1.forEach((item) => {
					if (item.id == id) {
						return item.nickName;
					}
				});
				return id;
			},
			formatter2(id) {
				this.options2.forEach((item) => {
					if (item.id == id) {
						return item.nickName;
					}
				});
				return id;
			},
			//保存
			addEmplo() {
				this.tb3.examineId = this.tab2.examineId;
				this.tb3.userId = this.tab2.userId;
				this.tb3.managementId = this.tab2.managementId;
				this.tb3.financeId = this.tab2.financeId;
				examineUpdate(this.tb3).then((res) => {
					if (res.code) {
						this.$message({
							type: "success",
							message: "修改成功",
						});
						this.addFromDialog = false;
						this.getAllGoods();
					} else {
						this.$message({
							type: "error",
							message: res.message,
						});
					}
				});
			},
			//模糊查询信息
			likeEmployee() {
				selectEmployeeProfileByName(this.input).then((data) => {
					if (data.code) {
						this.tableData = data.data.map((item, index) => {
							item.i = index + 1;
							return item;
						});
					} else {
						this.$message({
							type: "error",
							message: data.message,
						});
					}
				});
			},

			//初始化图片
			imgstatus() {
				let url =
					"https://kris-k.oss-cn-hangzhou.aliyuncs.com/kris/c179093a-41b0-4c70-bc1f-6e5973f35c98-jia.png";
				this.imageUrl = url;
				this.imageUrl2 = url;
			},

			// 查询列表
			getAllGoods() {
				this.loading = true;
				const data = {
					id: this.userId,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				}
				examine.getExamineList(data).then(res =>{
					if (res.code == 200){
						this.total = res.data.total;
						this.tableData = res.data.examineVoList.map((item,index) =>{
							item.i=(this.currentPage-1)*this.pageSize+index+1;
							return item;
						})
					}
				}).finally(() =>{
					this.loading = false;
				})
				// examineList().then((res) => {
				// 	if (res.code) {
				// 		this.total = res.data.total;
				// 		this.tableData = res.data.list.map((item, index) => {
				// 			item.i = (this.currentPage - 1) * this.pageSize + index + 1;
				// 			return item;
				// 		});
				// 		this.loading = false;
				// 	} else {
				// 		this.$message("列表加载错误");
				// 	}
				// 	console.log("获取商品列表");
				// });
			},
			// pageSize变化
			handleSizeChange(pageSize) {
				this.pageSize = pageSize;
				this.getAllGoods();
			},
			// 页码变化
			handleCurrentChange(curPage) {
				this.currentPage = curPage;
				this.getAllGoods();
			},
			// 远程搜索用户
			getUserList(query) {
				this.selectLoading = true;
				const data = {
					nickName: query
				}
				userApi.fuzzyQuery(data).then(res => {
					if (res.code === 200) {
						this.userList = res.data.userVoList
						this.selectLoading = false;
					}
				})
			},
			reset(){
				this.userId = null;
				this.currentPage = 1;
				this.getAllGoods();
			}
		},
	};
</script>

<style scoped>
	.page {
		text-align: center;
	}

	.nameBox {
		overflow: auto;
		/* 显示滚动条 */
		z-index: 99;
		margin-top: 5px;
		font-size: 12px;
		text-align: center;
		width: 205px;
		height: 170px;
		border-radius: 5px;
		background-color: #ffffff;
		box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
		position: absolute;
	}

	.examine {
		height: 100%;
	}

	.goods-table {
		height: 94%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}

	.imgUrl {
		width: 100px;
		height: 100px;
		object-fit: cover;
		/* 保持原始宽高比，填充容器 */
	}

	.htimg {
		width: 150px;
		height: 150px;
		object-fit: cover;
		/* 保持原始宽高比，填充容器 */
	}
</style>